<template>
	<view>
		<view class="u-flex user-box u-p-l-20 u-p-r-20 u-p-b-30 u-p-t-30" style="flex-direction: column;">
			<view class="u-m-r-10">
				<u-avatar :src="user.avatar" size="200"></u-avatar>
			</view>
			<u-button @tap="chooseAvatar" size="mini" style="margin-top: 10px;" type="primary">上传头像</u-button>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-field v-model="user.username" label="账号" placeholder="请填写账号" />
				<u-field v-model="user.realName" label="姓名" placeholder="请填写姓名" />
				<u-field label="性别" disabled>
					<u-radio-group v-model="user.sex" slot="right" style="width: 500px;">
						<u-radio name="1">男</u-radio>
						<u-radio name="2">女</u-radio>
					</u-radio-group>
				</u-field>
				<u-field v-model="user.email" label="邮箱" placeholder="请填写邮箱" />
				<u-field v-model="user.phone" label="手机号" placeholder="请填写手机号" />
				<u-field v-model="user.role" label="角色" disabled />
			</u-cell-group>
		</view>
		<u-button @click="saveInfo" shape="circle" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary"
			style="width: 86%;">
			保存信息</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import SET from '@/SET.js'
	export default {
		data() {
			return {
				user: {
					avatar: "",
					birthday: '',
					email: "",
					gmtModified: "",
					id: "",
					loginType: '',
					phone: "",
					realName: "",
					role: "",
					sex: '',
					status: '',
					username: "",
				},
				action: SET.baseUrl + '/system/common/upload-file',
			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.action,
					filePath: path,
					name: 'file',
					success: (res) => {
						this.$refs.uToast.show({
							title: '上传成功',
							type: 'success'
						})
						this.user.avatar=SET.baseUrl+JSON.parse(res.data).result.path
					}
				});
			})
		},
		onShow() {
			this.user = this.$store.state.userInfo
			console.log(this.user)
		},
		methods: {
			saveInfo() {
				console.log(this.user)
				this.$api.modifyUserInfo(this.user).then(res=>{
					this.$refs.uToast.show({
						title: '保存成功',
						type: 'success'
					})
				})
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.user-box {
		background-color: #fff;
	}

	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
</style>
